// #app1
var app1 = new Vue({
    el: '#app1',
    data: {
        time:new Date().toLocaleString()
    },
    created(){
        var th = this;
        setInterval(function(th){
            app1.time = new Date().toLocaleString();
        },1000)
    }
})

//app2
var app2 = new Vue({
    el: '#app2',
    data: {
        lists: ['1', '2', '3', '4']
    }
})

//app3
var app3 = new Vue({
    el: '#app3',
    data: {
        lists: [],
        status:0
    },
    methods:{
        makereverse:function(key){
           console.log(key);
        }
    },
    created() {
        fetch("http://vue.love/json/getInfo")
            .then(response=>response.json())
            .then(json=>{
                for(list in json.data){
                    json.data[list]['status']= this.status
                }
                this.lists = json.data
            })
    }
})

// app4
var app4 = new Vue({
    el:'#app4',
    data:{
        message:'echo some string!'
    },
    methods:{
        dostr:function(){
            this.message = this.message.split('').reverse().join('');
        }
    }
})

//app5
Vue.component('app5_box1',{
    props:['app5_box1_data'],
    template:'<h3>{{ app5_box1_data.title }} {{ app5_box1_data.time }}</h3>',
})

Vue.component('app5_box2',{
    props:['app5_box2_data'],
    template:'<p>{{ app5_box2_data.describe }}</p>',
})

Vue.component('app5_box3',{
    props:['app5_box3_data'],
    template:'<li>' +
    '{{ app5_box3_data.text }}' +
    // '<p>{{ app5_box3_data.p.join(",")}}</p>' +
    '<p v-for="box3_p in app5_box3_data.p">{{ box3_p }}</p>' +
    '</li>',
})

var app5 = new Vue({
    el:'#app5',
    data:{
        data1:{
          title:'模块测试'
        },
        data2:[
            {id:1,describe:Math.random()},
            {id:2,describe:Math.random()},
            {id:3,describe:Math.random()},
            {id:4,describe:Math.random()},
            {id:5,describe:Math.random()},
            {id:6,describe:Math.random()},
        ],
        data3:[
            {id:101,text:1,p:[1,2,3,4]},
            {id:102,text:2,p:[1,2,3,4]},
            {id:103,text:3,p:[1,2,3,4]},
            {id:104,text:4,p:[1,2,3,4]},
            {id:105,text:5,p:[1,2,3,4]},
        ]
    }
})

//app6

var data6={id:1,name:'陆志洁',b:null};

//阻止数据响应
// Object.freeze(data6);

var app6 = new Vue({
    el:'#app6',
    data:data6,
    created:function(){
        // alert('对象创建完成');
    },
    updated:function(){
        // alert('对象中的数据被修改了');
    }
})

//特定数据响应钩子
app6.$watch('id',function(newid,oldid){
    alert('旧id:'+oldid+',新id:'+newid);
})
/*
* app6.id ==> 1
* app6.id = 10
* data.id = 10
* */

//app7
var app7 = new Vue({
    el:'#app7',
    data:{
        template:'<div style="color:red">这是重点哦~</div>',
        id:666,
        status:false
    },
    methods:{
        echoCode:function(){
            console.log(Math.random())
        }
    }
})

//app8
var app8 = new Vue({
    el:'#app8',
    data:{
        firstName:'Lu',
        lastName:'zhijie'
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName+' '+this.lastName;
            },
            set:function(fullName){
                var tmpName = fullName.split(' ');
                this.firstName = tmpName[0];
                this.lastName = tmpName[1];
            }
        }
    },
    methods:{
        changeFirstName:function(){
            this.firstName = 'wu';
        },
        changeLastName:function(){
            this.lastName = 'wei';
        },
        changeFullName:function(){
            this.fullName = 'lu qunxun';
        }
    }
})

//app9
var app9 = new Vue({
    el:'#app9',
    data:{
        ask:'',
        answer:'请输入问题!'
    },
    watch:{
        ask:function(newask,oldask){
            app9.answer = '正在处理~';
            app9.getAnswer();
        }
    },
    methods:{
        getAnswer:_.debounce(function(){
            fetch('http://vue.love/json/getAnswer')
                .then(response=>response.json())
                .then(json=>{
                    app9.answer=json.answer;
                })
        },500)
    }
})